<script lang="ts" setup>
import { ref, onActivated, onDeactivated, watchEffect, computed } from 'vue'
import API from "@/service/api/faq";
import { request } from "@/service/request";
import { useRoute, useRouter, onBeforeRouteLeave } from "vue-router";
import cAccountinf from "./plugin/index.vue"
import { useFaqButton } from "@/hook/useButton.ts"
import { useStore } from "@/stores/user";
import { useFullPage } from "@/hook/useFullPage";
import order from "@/service/api/order";

defineOptions({
    name: "faqDetail"
})

//跳转过来拿到对应的详情ID
const mRoute = useRoute();
const mRouter = useRouter();
const mFaqTitle = ref(''); //问题标题

//问题分类
const mFaqDetails: any = ref();
const htmlText = ref();
const clkGetfaq = async () => {
    const { data } = await request.post<any>(API.faqDetail, { id: Number(mRoute.query.id) });
    mFaqDetails.value = data;
    htmlText.value = data.answer;
    mFaqTitle.value = data.title;
};
clkGetfaq()

//结束办法
const mFaqSolutionText: any = ref({
    'none': {
        title: '以上回答对你有帮助吗',
        buttonl: '有帮助',
        buttonr: '没有帮助',
    },
    'order': {
        title: '你的问题是否已解决?',
        buttonl: '已解决',
        buttonr: '未解决',
    },
});

//切换按钮
const { btnStyle, selectBtn, resetBtn } = useFaqButton();
const mStore = useStore();
const mActionSheetRef = ref();
const mFaqSheetRef: any = ref(null);
const clkLbuttonl = () => {
    showToast('感谢您的反馈')
    selectBtn('l');
};

const clkLbuttonr = () => {
    if (mFaqDetails.value.process_flow == "order" && mStore.state) {
        mFaqSheetRef.value.openDialog();
    } else if (!mStore.state && mFaqDetails.value.work_order_template_code == "find_account") {
        mRouter.push({ path: '/findaccount', query: { 'work_order_template_id': mFaqDetails.value.work_order_template_id } });
    } else if (mFaqDetails.value.process_flow == "order" && !mStore.state) {
        mActionSheetRef.value.openDialog();
    }

    if (mFaqDetails.value.process_flow == "none") {
        showToast('感谢您的反馈')
    }
    selectBtn('r');
};

//如果是去登录页的
const mIsLogin = ref(false);

onBeforeRouteLeave((to, from) => {
    if (to.name == 'login' || to.name == 'question' || to.name == 'findaccount') {
        if (!mStore.state) {
            resetBtn();
        }
        mIsLogin.value = true;
    } else {
        mIsLogin.value = false;
    }
})


watchEffect(() => {
    if (mStore.state && mActionSheetRef.value) {
        mActionSheetRef.value.closeDialog();
    }
})

onDeactivated(() => {
    if (mIsLogin.value == false) {
        resetBtn();
    }
    mFaqDetails.value = null;
})

onActivated(() => {
    // 更新内容
    clkGetfaq();
})

//重置按钮状态
const clkBeforeClose = () => {
    resetBtn();
};

const clkLoginKf = () => {
    if (!mStore.state) {
        mActionSheetRef.value.openDialog();
    } else {
        window.open(API.getKfUrl(), '_self');
    }
};

const { pageRef } = useFullPage()

// 手机号检查
const clkUserPhone = async () => {
    const { data } = await request.post<any>(order.userInfo);
    if (data.telephone && data.telephone.length === 11) {
        return true;
    } else {
        showToast({ message: "你的游戏账号还未绑定手机号" });
        return false;
    }
};

//文章跳转拦截
const richTextConfig = computed(() => ({
    htmlText: htmlText.value || '',
    router: mRouter,
    loginCheckMethod: () => {
        if (!mStore.state) {
            mActionSheetRef.value.openDialog();
        }
        return mStore.state; //登录才跳转
    },
    phoneCheckRoutes: ['/changepassword'], // 需要校验手机号的路由
    phoneCheckMethod: clkUserPhone // 校验方法
}))

</script>

<template>
    <cNavbar :iTitle="mRoute.query.category" iFontColor="#3D3D3D" leftArrow iFontSize="4.427vmin" iFixed></cNavbar>
    <div class="bg" ref="pageRef">
        <div class="gr-detail" v-if="mFaqDetails">
            <h1 class="gr-title">
                <van-image src="/answer.png" width="6.25vmin" class="m-r-[8px]" fit="cover"></van-image>
                <span class="text-[34px] font-medium">{{ mFaqDetails.title }}</span>
            </h1>
            <div v-richText="richTextConfig" class="break-words"></div>
        </div>
        <div class="gr-process-flow" v-if="mFaqDetails">
            <div v-if="mFaqDetails.process_flow != 'manual'">
                <h1 class="text-center text-[26px] m-t-[25px] m-b-[25px] font-normal">
                    {{
                        mFaqSolutionText[mFaqDetails.process_flow].title
                    }}
                </h1>
                <div class="gr-operate">
                    <cButton round :iColor="btnStyle('l').value.color" iHeight="5vmin" iPadding="5vmin"
                        class="w-[300px] font-bold" :iBgColor="btnStyle('l').value.bgcolor" iFontSize="3vmin"
                        @click="clkLbuttonl" hairline>
                        {{ mFaqSolutionText[mFaqDetails.process_flow].buttonl }}
                    </cButton>
                    <cButton round :iColor="btnStyle('r').value.color" iHeight="5vmin" iPadding="5vmin" plain hairline
                        :iBgColor="btnStyle('r').value.bgcolor" class="w-[300px] font-bold" iFontSize="3vmin"
                        @click="clkLbuttonr">
                        {{ mFaqSolutionText[mFaqDetails.process_flow].buttonr }}
                    </cButton>
                </div>
            </div>
            <div class="gr-kf" v-show="mFaqDetails.process_flow == 'manual'">
                <span class="m-r-[30px]">自己无法解决？联系</span>
                <a @click="clkLoginKf">
                    <van-image src="/kf.png" width="4.25vmin" class="align-middle"></van-image>
                    <span>在线客服</span>
                </a>
            </div>
        </div>
        <cVanActionSheet ref="mActionSheetRef" :iButton="false" iPadding="6.25vmin 6.25vmin 8.854vmin 6.25vmin">
            <h1 class="text-[34px] font-medium">你还未登录，请先登录账号</h1>
            <cButton class="w-[100%] m-t-[40px] text-[28px] font-medium" iLinearGradien round iColor="white"
                iHeight="9.6vmin" @click="mRouter.push({ path: '/login', query: { redirect: mRoute.fullPath } })">登录账号
            </cButton>
        </cVanActionSheet>
        <cVanActionSheet ref="mFaqSheetRef" :iButton="false" iBgColor="#F6F6F6"
            iPadding="6.25vmin 3.125vmin 8.854vmin 3.125vmin" iCloseIconTop="7.667vmin" iCloseIconRight="3.467vmin"
            @close="clkBeforeClose">
            <cAccountinf :iTemplateId="mFaqDetails.work_order_template_id"
                :iWorkCode="mFaqDetails.work_order_template_code" v-if="mFaqDetails">
            </cAccountinf>
        </cVanActionSheet>
    </div>
</template>

<style lang="scss" scoped>
.gr-process-flow {
    background: $color10;
    margin: 23px 23px 0 23px;
    padding: 24px;
    border-radius: 24px;

    .gr-operate {
        display: flex;
        justify-content: space-between;
    }
}

.bg {
    background: #F6F6F6;
}

.gr-detail {
    margin: 23px 23px 0 23px;
    padding: 24px;
    background: $color10;
    border-radius: 24px;
    font-size: calc($fontSize + 5px);

    .gr-title {
        display: flex;
        align-items: center;
        margin-bottom: 31px;
    }
}

.gr-kf {
    margin: 35px 0 15px 0;
    text-align: center;
    font-size: calc($fontSize + 10px);

    a {
        color: #7bc7ff;
    }
}
</style>